<template>
<div class="container">
 <div class="user_info">
    <div class="flex flex-between input_item">
      <label for="">收货公司</label>
      <input v-model="formData.name"  placeholder="请输入公司名称" />
    </div>

      <div class="flex input_item">
      <label for="">联系人</label>
      <input v-model="formData.contact" placeholder="请输入联系人" />
    </div>
       <div class="flex input_item">
      <label for="">电话</label>
      <input v-model="formData.phone" maxlength="11" type="idcard" placeholder="请输入电话" />
    </div>
      <div class="flex input_item">
      <label for="">所在地区</label>
          <picker mode="region" @change="bindRegionChange"  :value="region" :custom-item="customItem">
    <div class="picker">
      <input v-model="realAddress" disabled placeholder="请选择所在地区" />
    </div>
  </picker>
    </div>
    <div class="flex input_item">
      <label for="">详细地址</label>
      <input v-model="formData.address"  placeholder="请输入地址" />
    </div>
    <div class="flex input_item">
      <label for="" >设置默认地址</label>
        <switch :checked='formData.type' @change="switchChange"/>
    </div>

  <div class="btn_box">
    <div  @click="formSubmit" class="fixed_btn">{{isEdit?'确定修改':'确定新增'}}</div>

  </div>
  </div>
</div>
</template>

<script>
import api from "@/utils/api";
import checkApi from "@/utils/checkApi";

export default {
  data() {
    return {
      id: "",
      formData: {
        address: "",
        contact: "",
        area: "",
        city: "",
        province: "",
        id: 0,
        name: "",
        phone: "",
        type: ""
      },
      region: ["", "", ""],
      codeList: [],
      customItem: "",
      isEdit: false, //true 就是编辑
      realAddress: "",
      pageType:'',
    };
  },
  onShow() {
    this.formData = {
      address: "",
      contact: "",
      area: "",
      city: "",
      province: "",
      id: 0,
      name: "",
      phone: "",
      type: ""
    };
    this.region=["", "", ""]
    this.realAddress=''
  },
  async mounted() {
    let { query } = this.$route;
    if (query) {
      this.formData.id = query.id;
      this.pageType = query.pageType;
    }
    if (query.id) {
      this.isEdit = true;
      this.getDetail();
    } else {
      this.isEdit = false;
      this.formData.id = 0;
    }
    this.formData.type = 0;
    wx.setNavigationBarTitle({
      title: this.isEdit ? "编辑联系人" : "新增联系人"
    });
  },
  methods: {
   checkAll(){
      let fd=this.formData
      let errMsg='请填写必填项'
      var index=0
    Object.keys(fd).forEach((key) => {
      if(key=='address'
      ||'contact'
      ||'area'
      ||'city'
      ||'province'
      ||'name'
      ||'phone'
      ){
        if(!fd[key]&&key!='id'&&key!='type'){
          index++
        }
      }
    })
    if(index>0)errMsg='请填写必填项';
    if(fd.phone&&!checkApi.isMobile(fd.phone)){
      index++
      errMsg='请输入正确的手机号'
    }
    if(index>0){
      this.toastError(errMsg)
      return false
    }else{
      return true
    }
    },
    getDetail() {
      api.customerContact.Detail({ id: this.formData.id }).then(res => {
        console.log("联系人详情res", res);
        if (res && res.code == 0) {
          this.formData = {...this.formData,...res.data };
          console.log(' this.formData', this.formData)
        }else{
          this.toastError(res.msg)
        }
      }).catch(err=>{
          this.toastError('网络繁忙')
      })
    },
    formSubmit() {
      let option = this.formData;
      console.log("创建参数", option);
      if(!this.checkAll())return;
      api.customerContact
        .Update(option)
        .then(res => {
          if (res && res.code == 0) {
            this.$router.go(-1);
            this.toastSuccess(res.msg);
          } else {
            this.toastError(res.msg);
          }
          console.log("创建联系人", res);
        })
        .catch(err => {
          this.toastError("网络繁忙！");
        });
    },
    switchChange(e) {
      this.formData.type = e.target.value ? 1 : "";
    },
    bindRegionChange: function(e) {
      this.region = e.target.value;
      this.codeList = e.target.code;
      this.realAddress = this.region.join(",");
    }
  },
  watch:{
    region(){
      let fD=this.formData
      let codeList=this.codeList
      console.log('codeList',codeList)
      if(this.region&&codeList.length>0){
        this.formData.province=codeList[0]
        this.formData.city=codeList[1]
        this.formData.area=codeList[2]
      }
    },
    formData(){
      if(this.formData.provinceName){
      this.realAddress=this.formData.provinceName+',' +this.formData.cityName+',' + this.formData.areaName
      this.region=this.realAddress.split(',')
      }

    }
  }
};
</script>


<style scoped>
.container {
    background-color: #f8f8f8;
    min-height: 100vh;
}
.user_info {
  width: 100%;
  background-color: #fff;
}

.input_item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 5px 15px;
}
.input_item picker{
  flex: 3;
}
.input_item input {
  flex: 3;
  padding: 5px 0 5px 10px;
}
.input_item > label {
  width: 100px;
}
.btn_box button {
  background-color: #2d8cf0;
  text-align: center;
  color: #fff;
  margin-top: 50px;
}
</style>

